<template>
  <div class="register">
    <el-row>
      <h3 style="text-align:center">注册</h3>
      <el-form label-width="80px">
        <el-form-item label="用户名">
          <el-input
            v-model="username"
            placeholder="请输入用户名"
          >
            <el-button
              type="primary"
              slot="append"
              @click="sendmessage"
            >发送</el-button>
          </el-input>
          <p class="tishi">{{nametxt}}</p>
        </el-form-item>
        <el-form-item label="验证码">
          <el-input
            v-model="yzcode"
            placeholder="请输入手机验证码"
          ></el-input>
          <p class="tishi">{{codetxt}}</p>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="pwd"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            v-model="checkpwd"
            placeholder="请输入确认密码"
            type="password"
          ></el-input>
          <p class="tishi">
            {{checktxt}}</p>
        </el-form-item>
        <!-- 注册按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            class="btn"
            @click="register"
          >立即注册</el-button>
          <p class="bot_a">
            <span>
              <router-link to="/login/login_form">登录</router-link>
            </span>
          </p>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "register",
  data() {
    return {
      username: "",
      yzcode: "",
      pwd: "",
      checkpwd: "",
      checktxt: "",
      nametxt: "",
      codetxt: "",
      sendphone: "",
      sendcode: "",
    };
  },
  methods: {
    register() {
      if (this.username == "" && this.yzcode == "" && this.checkpwd == "") {
        this.nametxt = "用户名不能为空";
        this.codetxt = "验证码不能为空";
        this.checktxt = "密码不能为空";
      } else if (this.username == "") {
        this.nametxt = "用户名不能为空";
      } else if (this.yzcode == "") {
        this.codetxt = "验证码不能为空";
      } else if (this.checkpwd == "") {
        this.checktxt = "密码不能为空";
      } else if (this.pwd != this.checkpwd) {
        this.checktxt = "两次密码不相同";
      } else if (this.yzcode != this.sendcode) {
        this.$message({
          message: "请输入正确验证码",
          type: "warning",
        });
      } else {
        this.$post(this.url + "/user/register", {
          userName: this.username,
          pwd: this.checkpwd,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message({
              message: "注册成功",
              type: "success",
            });
            this.$router.push("/login/login_form");
          } else {
            this.$message({
              message: "该号码已注册，请登录",
              type: "info",
            });
          }
        });
      }
    },
    // 发送验证码
    sendmessage() {
      var tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!tel.test(this.username)) {
        this.$message.warning("请输入正确的手机号码");
      } else {
        this.$post("http://139.198.178.82:9090/Shopping/api/v1/send/sms/msg", {
          userName: this.username,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.yzcode = res.data;
            this.codetxt = "当前验证码是：" + res.data;
            this.sendphone = this.username;
            this.sendcode = res.data;
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.btn {
  width: 100%;
}
.tishi {
  margin: 0;
  color: red;
}
.bot_a {
  text-align: center;
  color: red;
  word-spacing: 15px;
}
.register {
  width: 30%;
  border-radius: 15px;
  margin: 0 auto;
}
</style>